<template>
  <div class="chat-page">
    <a-row style="height: 100vh">
      <!-- 左侧历史记录区域 -->
      <a-col :span="4">
        <div class="history-container">
          <div class="history-title">问答历史
            <a-icon
              type="plus-circle"
              class="new-chat-icon"
              @click="newChat"
            />
          </div>
          <div class="history-list">
            <div
              v-for="(record, index) in chatHistory"
              :key="record.id || index"
              class="history-item"
              :class="{ 'active': selectedHistoryIndex === index }"
            >
              <div class="history-item-content">
                <span @click="selectHistory(index)">
                  {{ record.chatRecord.title.substring(0, 10) }}...
                </span>
                <a-icon
                  title="新对话"
                  type="delete"
                  class="delete-icon"
                  @click.stop="deleteHistory(index)"
                />
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <!-- 右侧聊天区域 -->
      <a-col :span="20">
        <div class="chat-container">
          <!-- Chat Messages -->
          <div class="chat-messages" ref="messagesContainer">
            <!-- Welcome Message -->
            <div class="message bot-message">
              <div class="message-content">
                <a-icon type="smile" class="sun-icon" />
                <span>{{ greeting }}</span>
                <br />
                <span>欢迎向我咨询专家信息。</span>
              </div>
            </div>

            <!-- Suggestions -->
            <div class="suggestions-container">
              <div class="suggestions-title">您可以这样问：</div>
              <div class="suggestions">
                <div
                  class="suggestion-item"
                  v-for="(suggestion, index) in suggestions"
                  :key="index"
                  @click="selectSuggestion(suggestion.text)"
                >
                  <span class="suggestion-tag">{{ suggestion.tag }}</span>
                  <span class="suggestion-text">{{ suggestion.text }}</span>
                  <a-icon type="right" class="suggestion-arrow" />
                </div>
              </div>
            </div>

            <!-- Chat Messages -->
            <div v-for="(message, index) in messages" :key="index" class="message-wrapper">
              <!-- 用户消息 -->
              <div v-if="message.type === '1' && message.role==='user'" class="message user-message">
                <div class="message-content">
                  {{ message.messageContent}}
                </div>
              </div>

              <!-- 机器人消息 -->
              <div v-else-if="message.type === '1' && message.role==='bot'" class="message bot-message">
                <div class="message-content">
                  <TypingEffect
                    v-if="message.source === 'new'"
                    :text="message.finalContent || message.messageContent"
                    :startPosition="message.displayPosition || 0"
                    @complete="onTypingComplete(index)"
                  />
                  <span v-else>{{ message.finalContent || message.messageContent }}</span>
                  <!--                  {{ message.messageContent }}-->
<!--                  <div v-if="isLoading && !message.createTime" style="margin-top: 8px;">-->
<!--                    <a-spin size="small" />-->
<!--                    <span style="margin-left: 8px;">正在思考中...</span>-->
<!--                  </div>-->
                </div>
              </div>

              <!-- 列表数据 -->
              <a-row
                v-else-if="message.type === '2' && message.role==='bot' && JSON.parse(message.messageContent).length>0"
                class="talent-detail-container"
                :gutter="16"
              >
                <div class="talent-detail-title">专家信息</div>
                <a-col v-for="(item, itemIndex) in JSON.parse(message.messageContent)" :key="itemIndex" :span="8">
                  <a-card style="border-radius: 10px; cursor: pointer;margin-bottom: 10px;height: 140px; background: linear-gradient(89.83deg, rgba(255,255,255,1) 1.05%,rgba(147,227,201,1) 82.48%,rgba(84,211,170,1) 100.35%);" size="small" @click="toTalentInfo(item)">
                    <a-row>
                      <a-col span="8">
                        <a-avatar shape="square" :size="110"
                                  :src="item.talentPhoto != null ? item.talentPhoto : item.talentGender != null ? item.talentGender== '男' ? manPhoto : womanPhoto : unknownPhoto"/>
                      </a-col>
                      <a-col span="16">
                        <div style="padding-left: 5px;">
                          <a-row>
                            <a-col span="20" style="color: rgba(3, 129, 129, 1); font-size: 25px; cursor: pointer; line-height: 30px; font-weight: bold;">{{item.talentRealName}}</a-col>
                            <a-col span="4" style="line-height: 30px; font-size: 20px; " :title="item.talentPartPhoneNumber" v-if="item.talentPartPhoneNumber  != null "><a-icon type="phone" theme="twoTone" /></a-col>
                          </a-row>
                          <a-row v-if="item.talentCompany != null">
                            <a-col span="24" style="padding-top: 5px;font-weight: bold;">
                              <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis" :title="item.talentCompany">{{item.talentCompany}}</div>
                            </a-col>
                          </a-row>
                          <a-row v-if="item.talentCooperationNum != null">
                            <a-col span="24" style="padding-top: 5px;font-weight: bold;">合作次数：{{item.talentCooperationNum}}次</a-col>
                          </a-row>
                          <a-row v-if="item.talentFields != null">
                              <a-col span="24" style="padding-top: 5px;font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                                研究关键词：<span :title="item.talentFields">{{item.talentFields}}</span>
                            </a-col>
                          </a-row>
                          <a-row v-if="item.talentGwFields != null">
                            <a-col span="24" style="padding-top: 5px;font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                               研究领域：{{item.talentGwFields}}
                            </a-col>
                          </a-row>
                        </div>
                      </a-col>
                    </a-row>
                  </a-card>
                </a-col>
              </a-row>
              <a-empty v-else/>
            </div>
          </div>

          <!-- Input Area -->
          <div class="chat-input">
            <a-input-search
              v-model:value="inputMessage"
              placeholder="请输入想问的问题..."
              size="large"
              :disabled="sendMessageBtn"
              @search="sendMessage"
            >
              <template #enterButton>
                <svg
                  width="20"
                  height="40"
                  viewBox="0 0 16 16"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  style="fill: currentcolor; color: white;"
                >
                  <title>icon/发送</title>
                  <g
                    id="icon/发送"
                    stroke="none"
                    stroke-width="1"
                    fill="none"
                    fill-rule="evenodd"
                  >
                    <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
                    <path
                      d="M13.4977171,1.00226533 C13.9231675,0.978242454 14.3369698,1.14625452 14.6252307,1.46005857 C14.9134917,1.77386261 15.045828,2.20038299 14.9858159,2.62222596 L14.9938164,2.54322788 L14.9958165,2.64522541 L14.9968166,2.90721904 C14.9828157,4.76317394 14.6607943,7.06711796 13.8327393,9.54205783 C13.767735,9.73405316 13.7027307,9.9220486 13.6367263,10.1040442 C13.0866898,11.6180074 12.4906502,12.7539798 11.8836099,13.5649601 C11.5815899,13.9689503 11.3175723,14.2419436 11.1105586,14.4099395 L11.0805566,14.431939 L11.0225528,14.5079372 C10.7403534,14.8375987 10.3218115,15.0186119 9.88830527,14.9984825 C9.45479903,14.9783531 9.05483564,14.7593334 8.8044055,14.4049397 L8.77540357,14.3589408 L8.60939255,14.1569457 C7.71624869,13.0244372 7.12263289,11.6853119 6.88327795,10.2630403 L6.91628014,10.233041 L11.7576016,5.10716559 L11.8216058,5.02916748 C12.0207926,4.73793163 11.9632967,4.34262064 11.6893984,4.12018004 C11.4155001,3.89773944 11.0167644,3.9225318 10.7725362,4.17718818 L6.05622305,9.17206682 C4.49611947,8.91707301 3.06602453,8.31508764 1.88294599,7.38211031 L1.67993251,7.21511437 L1.62692899,7.18211517 C0.806874549,6.6171289 0.766871893,5.40315839 1.65193065,4.86217154 L1.67193198,4.85117181 L1.73293603,4.79517317 L1.90794765,4.64517681 L2.12996239,4.46818111 L2.25697082,4.36818354 C2.76900481,3.97819302 3.36004405,3.58820249 4.02708833,3.22421134 C4.8154212,2.79235324 5.64366174,2.43771224 6.50025253,2.16523707 C8.94041452,1.33925714 11.2325667,1.01826494 13.0936903,1.00426528 L13.2437002,1.00426528 L13.450714,1.0072652 L13.4977171,1.00226533 Z"
                      id="路径"
                      fill="#a0e8db"
                    ></path>
                  </g>
                </svg>
              </template>
            </a-input-search>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { postStreamAction, postAction, getAction } from '@/api/esManage'
import womanPhoto from '@views/talentCooperation/common/womanPhoto.png'
import manPhoto from '@views/talentCooperation/common/manPhoto.png'
import unknownPhoto from '@views/talentCooperation/common/unknownPhoto.png'
import Setting from '@/setting'
import TypingEffect from '../es/TypingEffect.vue'

export default {
  components: {
    TypingEffect
  },
  data() {
    return {
      userId: '',
      womanPhoto: womanPhoto,
      manPhoto: manPhoto,
      unknownPhoto: unknownPhoto,
      inputMessage: '',
      isLoading: false,
      hasError: false,
      messages: [],
      currentBotMessage: '',
      suggestions: [
        {
          tag: '【时间维度】',
          text: '近三年内，新型电力系统领域有哪些活跃的专家？'
        },
        {
          tag: '【领域维度】',
          text: '电力系统领域，哪些学者在新型电力系统方向有突出贡献？'
        },
        {
          tag: '【单位维度】',
          text: '清华大学新型电力系统领域有哪些专家？'
        }
      ],
      chatRecordId: '',
      talentDetailRecords: [],
      chatHistory: [],
      selectedHistoryIndex: -1,
      recordId: '',
      isComplete: false,
      isSelectedHistory: false,
      sendMessageBtn: false,
      streamController: null,
    }
  },
  computed: {
    greeting() {
      const now = new Date()
      const hour = now.getHours()
      if (hour >= 5 && hour < 12) {
        return '早上好，'
      } else if (hour >= 12 && hour < 18) {
        return '下午好，'
      } else {
        return '晚上好，'
      }
    }
  },
  async created() {
    if (Setting.isMock) {
      window.localStorage.setItem('sysUserId', '1229')
      window.localStorage.setItem('realname', '李正正')
    }
    this.userId = window.localStorage.getItem('sysUserId')
    if(!this.userId){
      this.userId = '1229'
    }
    await this.fetchChatHistory()
  },
  methods: {
    resetChat() {
      this.messages = []
      this.inputMessage = ''
      this.isLoading = false
      this.hasError = false
      this.currentBotMessage = ''
      this.talentDetailRecords = []
      this.selectedHistoryIndex = -1
    },
    selectSuggestion(text) {
      this.inputMessage = text
      this.sendMessage()
    },
    async sendMessage() {
      this.sendMessageBtn = true;
      if (!this.inputMessage.trim()) return;

      // 添加用户消息
      const userMessage = {
        type: '1',
        role: 'user',
        messageContent: this.inputMessage
      };
      this.messages.push(userMessage);

      // 添加bot消息占位
      const botMessage = {
        type: '1',
        role: 'bot',
        messageContent: '',
        finalContent: null,      // 最终完整内容
        displayPosition: 0,      // 新增：当前已显示位置
        isStreaming: true,
        source: 'new' // 新消息标记为 new
      };
      this.messages.push(botMessage);

      const randomId = Date.now();
      this.inputMessage = '';
      this.$nextTick(this.scrollToBottom);

      try {
        // 1. 创建聊天记录
        this.recordId = await this.createChatRecord(userMessage.messageContent);

        // 2. 处理流式响应
        await this.handleStreamResponse(
          userMessage.messageContent,
          botMessage,
          this.recordId,
          randomId
        );

        // 3. 获取专家详情
        await this.fetchTalentDetails(
          userMessage.messageContent,
          this.recordId,
          randomId
        );

      } catch (error) {
        this.handleError(error);
      } finally {
        this.sendMessageBtn = false;
        this.$nextTick(this.scrollToBottom);
      }
    },
    onTypingComplete(index) {
      // 可以在这里处理打字完成后的逻辑
      console.log(`消息 ${index} 打字效果完成`);
    },
    async createChatRecord(userMessage) {
      try {
        if(!this.recordId){
          const initialRecord = {
            title: userMessage,
            userId: this.userId
          };
          this.recordId = await this.saveChatRecord(initialRecord);
          await this.fetchChatHistory();
        }

        if (this.recordId) {
          await this.saveChatDetailRecord('user', '1', userMessage, this.recordId);
          return this.recordId;
        }
        console.warn('创建聊天记录失败，将继续对话但不保存历史');
        return null;
      } catch (error) {
        console.error('创建聊天记录出错:', error);
        return null;
      }
    },

    async handleStreamResponse(userMessage, botMessage, recordId, randomId) {
      const url = "/talents/talentInfoChatOfNew";
      const params = { content: userMessage, randomId };

      return new Promise((resolve, reject) => {
        let receivedContent = '';

        postStreamAction(
          url,
          params,
          (chunk) => {
            // 更新接收内容
            receivedContent += chunk;
            botMessage.messageContent = receivedContent;

            // 自动推进显示位置（如果不使用TypingEffect）
            botMessage.displayPosition = receivedContent.length;

            this.$forceUpdate();
            this.$nextTick(this.scrollToBottom);
          },
          async () => {
            // 流式传输完成
            botMessage.finalContent = receivedContent;
            botMessage.isStreaming = false;
            this.$forceUpdate();

            if (recordId) {
              await this.saveChatDetailRecord('bot', '1', receivedContent, recordId);
            }
            resolve();
          },
          (error) => {
            botMessage.finalContent = receivedContent + "\n[响应中断]";
            botMessage.isStreaming = false;
            this.$forceUpdate();
            reject(error);
          }
        );
      });
    },

    async fetchTalentDetails(userMessage, recordId, randomId) {
      const detailUrl = "/talents/talentInfoChatSearch";
      const params = { content: userMessage, randomId };

      try {
        const res = await postAction(detailUrl, params);
        if (res.data.success) {
          this.talentDetailRecords = res.data.result;

          this.messages.push({
            type: '2',
            role: 'bot',
            messageContent: JSON.stringify(this.talentDetailRecords)
          });

          if (recordId) {
            await this.saveChatDetailRecord('bot', '2', JSON.stringify(this.talentDetailRecords), recordId);
          }
        } else {
          throw new Error(res.data.message || '获取专家详情失败');
        }
      } catch (error) {
        console.error('获取专家详情失败:', error);
        throw error;
      }
    },

    handleError(error) {
      console.error('请求失败:', error);
      this.hasError = true;
      this.messages.push({
        type: '1',
        role: 'bot',
        messageContent: '请求失败，请稍后重试。'
      });
    },

    scrollToBottom() {
      const container = this.$refs.messagesContainer
      if (container) {
        container.scrollTop = container.scrollHeight
      }
    },
    toTalentInfo(item) {
      const routeUrl = this.$router.resolve({
        name: 'esTalentInfo',
        query: { 't': item.id, 'c': item.talentRealName }
      })
      window.open(routeUrl.href, '_blank')
    },
    async saveChatRecord(obj) {
      try {
        const res = await postAction('/talents/chat/record/save', obj);
        if (res.data.success) {
          this.chatRecordId = res.data.result;
          return res.data.result; // 返回记录ID
        }
        return null;
      } catch (error) {
        console.error('保存历史记录失败', error);
        return null;
      }
    },
    async saveChatDetailRecord(role, messageType, messageContent, chatRecordId) {
      try {
        const recordUrl = '/talents/chat/detailRecord/save';
        let obj = {
          role,
          messageContent,
          type: messageType,
          chatRecordId
        }
        postAction(recordUrl, obj).then(res => {
          if (res.data.success) {

          }
        })
      } catch (error) {
        console.error('保存历史记录失败', error);
      }
    },
    selectHistory(index) {
      this.isSelectedHistory = true;
      this.selectedHistoryIndex = index;
      const record = this.chatHistory[index];
      this.recordId = record.chatRecord.id;

      this.messages = record.messages;

      this.inputMessage = record.messages[0].messageContent;
      this.sendMessage()
      //
      // // 处理用户消息（可能是数组或字符串）
      // const userMessages = Array.isArray(record.messages.user) ?
      //   record.messages.user : [record.messages.user];
      //
      // // 处理bot消息（可能是数组或字符串）
      // const botMessages = Array.isArray(record.messages.bot) ?
      //   record.messages.bot : [record.messages.bot];
      //
      // // 交替添加用户消息和bot消息
      // const maxLength = Math.max(userMessages.length, botMessages.length);
      // for (let i = 0; i < maxLength; i++) {
      //   if (userMessages[i] && userMessages[i].type === '1') {
      //     this.messages.push({
      //       type: 'user',
      //       content: userMessages[i].messageContent
      //     });
      //   }
      //   if (botMessages[i] && userMessages[i].type === '2') {
      //     this.messages.push({
      //       type: 'bot',
      //       content: botMessages[i].messageContent
      //     });
      //   }
      // }

      // this.talentDetailRecords = record.talentDetailRecords;
      this.$nextTick(() => {
        this.scrollToBottom();
      });
    },
    async deleteHistory(index) {
      const record = this.chatHistory[index]
      try {
        const delHistoryUrl = '/talents/chat/records/delete/' + record.chatRecord.id
        getAction(delHistoryUrl).then(res => {
          if (res.data.success) {
          }
        })
        this.chatHistory.splice(index, 1)
        if (this.selectedHistoryIndex === index) {
          this.selectedHistoryIndex = -1
          this.messages = []
          this.talentDetailRecords = []
        } else if (this.selectedHistoryIndex > index) {
          this.selectedHistoryIndex--
        }
      } catch (error) {
        console.error('删除历史记录失败', error)
      }
    },
    newChat() {
      this.resetChat()
    },
    async fetchChatHistory() {
      try {
        const historyUrl = '/talents/chat/records/' + this.userId
        getAction(historyUrl).then(res => {
          if (res.data.success) {
            this.chatHistory = res.data.result.chatRecords
          }
        })
      } catch (error) {
        console.error('获取历史记录失败', error)
      }
    }
  },
  beforeUnmount() {
    // 不再需要 localStorage 存储
    // localStorage.setItem('chatHistory', JSON.stringify(this.chatHistory));
  }
}
</script>

<style scoped>
.chat-modal :deep(.ant-modal-content) {
  border-radius: 8px;
  overflow: hidden;
}

.chat-modal :deep(.ant-modal-header) {
  background-color: #fff;
  border-top: 4px solid #1ea18b;
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-icon {
  color: #1ea18b;
  font-size: 18px;
}

.title-text {
  font-size: 16px;
  font-weight: 600;
  color: #1ea18b;
}

.chat-page {
  height: 100vh;
}

.history-container {
  height: 100%;
  padding: 16px;
  border-right: 1px solid #e8e8e8;
}

.history-title {
  font-weight: 600;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0dada;
  justify-content: space-between;
  display: flex;
}

.history-list {
  height: calc(100% - 30px);
}

.history-item {
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 14px;
  height: 30px;
  padding: 5px;
}

.history-item-content:hover {
  height: 30px;
  background-color: #afe5dc; /* hover时的背景色 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 10px;
  font-weight: bold;
}

/* 选中状态样式 */
.history-item.active {
  background-color: #afe5dc;
}

.delete-icon {
  color: #ff4d4f;
  cursor: pointer;
  margin-left: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.delete-icon:hover {
  opacity: 1;
}

.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: #f5f5f5;
}

.timestamp {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin-bottom: 16px;
}

.message-wrapper {
  margin-bottom: 12px;
}

.message {
  max-width: 80%;
  margin-bottom: 8px;
}

.bot-message {
  margin-right: auto;
}

.bot-message .message-content {
  background-color: #fff;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-message {
  margin-left: auto;
}

.user-message .message-content {
  background-color: #1ea18b;
  color: white;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
}

.sun-icon {
  color: #faad14;
  margin-right: 4px;
}

.suggestions-container {
  margin: 20px 0;
  background-image: linear-gradient(180deg, #afe5dc, #fff 50%);
  border-radius: 12px;
  padding: 16px;
}

.suggestions-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.suggestions {
  display: flex;
  flex-direction: column;
}

.suggestion-item {
  padding: 5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.suggestion-item:hover {
  background-color: #f0f9ff;
  transform: translateX(4px);
}

.suggestion-tag {
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}

.suggestion-text {
  flex: 1;
  color: #666;
}

.suggestion-arrow {
  color: #ccc;
  font-size: 12px;
}

.error-message .message-content {
  background-color: #fff2f0;
  border-left: 4px solid #ff4d4f;
  color: #ff4d4f;
}

.chat-input {
  padding: 16px;
  background-color: #f5f5f5;
}

.input-field {
  border-radius: 20px;
}

.input-field :deep(.ant-input) {
  border-radius: 20px;
  padding-right: 50px;
}

.send-button {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #52c41a;
  border-color: #52c41a;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.send-button:hover, .send-button:focus {
  background-color: #389e0d;
  border-color: #389e0d;
}

.send-button:disabled {
  background-color: #d9d9d9;
  border-color: #d9d9d9;
}

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.history-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.new-chat-icon {
  color: #20b48c;
  padding-left: 100px;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.2s;
}

.new-chat-icon:hover {
  color: #40a9ff;
}

.talent-detail-container {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.talent-detail-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.talent-detail-item {
  margin: 8px;
  border-bottom: 1px solid #eee;
  background: #afe5dc;
}

.talent-detail-item:last-child {
  border-bottom: none;
}
.ellipsis-2lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 限制显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;  /* 处理长单词/中文换行 */
  line-height: 1.5;       /* 设置行高（根据实际调整） */
  max-height: 3em;        /* 行高×行数 = 最大高度（备用方案） */
  white-space: normal;
  width: 100%; /* 必须设置宽度 */
}
</style>
